import React, { ReactElement, useEffect, useRef, useState } from 'react';
import { ScrollView, TextInput } from 'react-native';

import styles from './style';
import Notch, { NotchType } from '../../components/Notch';
import NavBar from '../../components/NavBar';
import navigator from '../../util/navigator';
import Log from '../../common/log';
import { loading, toolTipOpen } from '../../util/global';

export default (): ReactElement => {
  const textInput = useRef<TextInput>(null);
  const [detail, setDetail] = useState('');

  const send = (): void => {
    if (textInput && textInput.current) {
      textInput.current.blur();
    }
    if (detail.length === 0) {
      toolTipOpen({ desc: '反馈内容不能为空' });
      return;
    }
    Log.i('FeedBack', JSON.stringify({ event: 'sendLog', value: detail }));
    loading.show();
    setTimeout((): void => {
      loading.hide();
      toolTipOpen({ desc: '反馈成功' });
      navigator.goBack();
    }, 1000);
  };

  useEffect((): void => {
    if (textInput && textInput.current) {
      textInput.current.focus();
    }
  }, []);

  return (
    <Notch type={NotchType.Top} style={styles.container}>
      <NavBar
        title="问题反馈"
        backAction={navigator.goBack}
        rightText="发送"
        rightAction={send}
      />
      <ScrollView keyboardDismissMode="on-drag">
        <TextInput
          ref={textInput}
          allowFontScaling={false}
          multiline
          placeholderTextColor="#8F95A2"
          style={styles.addressInput}
          placeholder="请输入"
          value={detail}
          onChangeText={setDetail}
        />
      </ScrollView>
    </Notch>
  );
};
